<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态绑定style</title>
		<style type="text/css">
			
			.title {
				font-size: 50;
				color: aqua;
			}
		</style>
	</head>
	<body>
		
		<div id="app">
			<!-- <h1 v-bind:style="{样式key: 样式值}">{{msg}}</h1> -->
			
			<!-- 对象的形式绑定大小  -->
			<h1 v-bind:style="{'font-size':'30px'}">{{msg}}</h1>
			<!-- 对象的写法2绑定大小  -->
			<h1 v-bind:style="{fontSize:'40px'}">{{msg}}</h1>
			<!-- 对象的形式绑定语法3  -->
			<h1 v-bind:style="{fontSize: h1FontSizepx}">{{msg}}</h1>
			<!-- 对象的形式绑定语法4  -->
			<h1 v-bind:style="{fontSize: h1FontSize+'px'}">{{msg}}</h1>
			
			<!-- 对象的形式绑定语法5 带颜色的案例 -->
			<h1 v-bind:style="{fontSize: h1FontSize+'px',color : fontColor}">{{msg}}</h1>
			
			<!-- 以对象的形式返回数据 -->
			<h1 :style="getStyle()">{{msg}}</h1>
			
			<hr >
			
			<h1>数组语法实现</h1>
			<h1 :style="[fontStyleColor,fontStyleSize]">{{msg}}</h1>
		</div>
		
		
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script>
			
			const app = new Vue({
				el: "#app",
				data: { 
					msg : "测试代码",
					h1FontSizepx : "60px",
					h1FontSize : 80,
					fontColor : "red",
					//定义数组语法格式
					fontStyleColor : {color:"red"},
					fontStyleSize  : {fontSize : "80px"}
				},
				methods:{
					getStyle : function(){
						
						return {fontSize: this.h1FontSize+'px',color : this.fontColor}
					}
				}
			});
			
			
		</script>
	</body>
</html>
